<template>
  <section :style="{height: $store.state.height + 'px'}" style="width: 100%;position: relative;">
    <div id="viewDiv" :style="{height: $store.state.height + 'px', width: '100%'}"></div>
  </section>
</template>

<script>
import { loadModules } from 'esri-loader'

export default {
  name: "ol3d",
  title: "arcgis3D",
  data () {
    return {}
  },
  mounted () {
    loadModules([
      'esri/Map',
      'esri/views/SceneView'
    ], {
      // use a specific version instead of latest 4.x
      url: 'https://js.arcgis.com/4.8/'
    }).then(([EsriMap, SceneView]) => {
      // create map with the given options at a DOM node w/ id 'mapNode'
      let map = new EsriMap({
          basemap: 'streets',
          ground: 'world-elevation'
        })
      const view = new SceneView({
        container: "viewDiv",     // Reference to the scene div created in step 5
        map: map,                 // Reference to the map object created before the scene
        scale: 50000000,          // Sets the initial scale to 1:50,000,000
        center: [-101.17, 21.78]  // Sets the center point of view with lon/lat
      })
    })
  },
}
</script>

<style scoped>
  @import url('https://js.arcgis.com/4.8/esri/css/main.css');
</style>
